{% extends 'base.html' %}
{% block title %}个人中心{% endblock %}
{% block nav %}个人中心{% endblock %}
{% block css %}
    <link href="../static/assets/css/user.css" rel="stylesheet"/>
{% endblock %}

{% block Sidebar %}
    <div class="sidebar" data-color="orange">
        <div class="logo">
            <a href="#" class="simple-text logo-mini">
                <img src="../static/assets/img/taobaologo.png" alt="#"/>
            </a>
            <a href="#" class="simple-text logo-normal">
                电商平台用户行为预测系统
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li>
                    <a href="{{ url_for('ec.index') }}">
                        <i class="now-ui-icons design_app"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.raw_data') }}">
                        <i class="now-ui-icons business_chart-pie-36"></i>
                        <p>原始数据</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual2') }}">
                        <i class="now-ui-icons education_atom"></i>
                        <p>预测与推荐</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual') }}">
                        <i class="now-ui-icons files_single-copy-04"></i>
                        <p>操作日志</p>
                    </a>
                </li>
                <li class="active">
                    <a href="{{ url_for('ec.user') }}">
                        <i class="now-ui-icons users_single-02"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="panel-header panel-header-sm" style="background: linear-gradient(135deg, #F5F5F5 0%, #1c84fc 100%);">
    </div>
    <div class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="title">信息编辑</h5>
                    </div>
                    <div class="card-body">
                        <form id="profile-form" method="POST" action="{{ url_for('auth.update_profile') }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <div class="row">
                                <div class="col-md-6 pr-1">
                                    <div class="form-group">
                                        <label>用户名</label>
                                        <input type="text" class="form-control" name="username"
                                               value="{{ current_user.username }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6 pl-1">
                                    <div class="form-group">
                                        <label>邮箱</label>
                                        <input type="email" class="form-control" name="email"
                                               value="{{ current_user.email }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 pr-1">
                                    <div class="form-group">
                                        <label>姓氏</label>
                                        <input type="text" class="form-control" name="last_name"
                                               value="{{ current_user.last_name or '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6 pl-1">
                                    <div class="form-group">
                                        <label>名字</label>
                                        <input type="text" class="form-control" name="first_name"
                                               value="{{ current_user.first_name or '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>居住地址</label>
                                        <input type="text" class="form-control" name="address"
                                               value="{{ current_user.address or '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 pr-1">
                                    <div class="form-group">
                                        <label>城市</label>
                                        <input type="text" class="form-control" name="city"
                                               value="{{ current_user.city or '' }}">
                                    </div>
                                </div>
                                <div class="col-md-4 px-1">
                                    <div class="form-group">
                                        <label>国家</label>
                                        <input type="text" class="form-control" name="country"
                                               value="{{ current_user.country or '中国' }}">
                                    </div>
                                </div>
                                <div class="col-md-4 pl-1">
                                    <div class="form-group">
                                        <label>邮政编码</label>
                                        <input type="text" class="form-control" name="postal_code"
                                               value="{{ current_user.postal_code or '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>个人简介</label>
                                        <textarea rows="4" class="form-control" name="bio">{{ current_user.bio or '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </form>

                        <hr>

                        <h5 class="title">修改密码</h5>
                        <form id="password-form" method="POST" action="{{ url_for('auth.change_password') }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <div class="form-group">
                                <label>当前密码</label>
                                <input type="password" class="form-control" name="current_password" required>
                            </div>
                            <div class="form-group">
                                <label>新密码</label>
                                <input type="password" class="form-control" name="new_password" required>
                            </div>
                            <div class="form-group">
                                <label>确认新密码</label>
                                <input type="password" class="form-control" name="confirm_password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">修改密码</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-user">
                    <div class="image">
                        <img src="../static/assets/img/bg5.jpg" alt="背景图">
                    </div>
                    <div class="card-body">
                        <div class="author">
                            <a href="#">
                                <img class="avatar border-gray" src="{{ current_user.avatar_url }}" alt="头像" id="user-avatar">
                                <h4 class="title">
                                    {% if current_user.first_name or current_user.last_name %}
                                        {{ current_user.last_name or '' }}{{ current_user.first_name or '' }}
                                    {% else %}
                                        {{ current_user.username }}
                                    {% endif %}
                                </h4>
                            </a>
                            <p class="description">
                                {{ current_user.username }}
                            </p>
                        </div>
                        <p class="description text-center">
                            {{ current_user.bio or "这个人很懒，什么都没留下" }}
                        </p>
                    </div>
                    <hr>
                    <div class="button-container">
                        <form id="avatar-form" enctype="multipart/form-data" style="display: none;">
                            <input type="file" id="avatar-input" name="avatar" accept="image/*">
                        </form>
                        <button class="btn btn-neutral btn-icon btn-round btn-lg" onclick="document.getElementById('avatar-input').click()">
                            <i class="now-ui-icons ui-1_simple-add"></i>
                        </button>
                        <button class="btn btn-neutral btn-icon btn-round btn-lg" onclick="location.reload()">
                            <i class="now-ui-icons arrows-1_refresh-69"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
// 头像上传处理
document.getElementById('avatar-input').addEventListener('change', function() {
    if (this.files && this.files[0]) {
        const formData = new FormData();
        formData.append('avatar', this.files[0]);

        fetch("{{ url_for('auth.upload_avatar') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('user-avatar').src = data.avatar_url + '?' + new Date().getTime();
                showToast('头像上传成功', 'success');
            } else {
                showToast(data.message || '头像上传失败', 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('上传过程中发生错误', 'danger');
        });
    }
});

// 表单提交处理
document.getElementById('profile-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('个人信息更新成功', 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast(data.message || '更新失败', 'danger');
        }
    });
});

document.getElementById('password-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('密码修改成功', 'success');
            this.reset();
        } else {
            showToast(data.message || '密码修改失败', 'danger');
        }
    });
});

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type} fixed-top mx-auto mt-3`;
    toast.style.width = '300px';
    toast.style.left = '0';
    toast.style.right = '0';
    toast.textContent = message;
    document.body.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 3000);
}
</script>
{% endblock %}